<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:09:00
-->
<template>
  <div class="head">
    <div class="wrapper">
      <div class="logo">logo</div>
      <div class="title" @click="toHomeHandler()">行学天下</div>
      <div class="category">
        <ul>
          <li v-for="item in categorys" :key="item.id"  @click="toListHandler(item.id)">{{item.name}}</li>
        </ul>
      </div>
      <div class="contact" @click="contactHandler()">联系我们</div>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      categorys: [],
    };
  },
  methods: {
    findAllCategory() {
      get("/index/category/findCategoryTree").then((res) => {
        if (res.status == 200) {
          this.categorys = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    // 点击联系按钮 跳转到联系我们
    contactHandler(){
      // 跳转页面
      this.$router.push({path:'/contact'})
    },
    //跳转到首页
    toHomeHandler(){
      this.$router.push({path:'/home'})
    },
    // 跳转到list页面
    toListHandler(id){
      this.$router.push({path:'/list',query:{categoryId:id}})
    }
  },
  created() {
    this.findAllCategory();
  },
};
</script>

<style scoped lang='scss'>
.head {
  box-shadow: 0 1px 5px #f4f4f4;
  padding: 0.8em;
}
.wrapper {
  width: 90%;
  height: 60px;
  line-height: 60px;

  .logo {
    float: left;
    cursor: pointer;
  }
  .title {
    float: left;
    font-size: 20px;
    font-weight: bolder;
    padding: 0 1em;
    cursor: pointer;
  }
  .category {
    font-size: 1.2em;
    float: left;
    ul li {
      float: left;
      padding: 0 2em;
      cursor: pointer;
    }
  }
  .contact {
    float: right;
    cursor: pointer;
  }
}
</style>